<template>
    <div>
        <el-header class="header">
            <span>概览</span>
        </el-header>
        <div class="mg-bottom-20">
            <span class="mg-right-10">最近</span>
            <el-radio-group v-model="days" @change="getData">
                <el-radio-button label="1"></el-radio-button>
                <el-radio-button label="7"></el-radio-button>
                <el-radio-button label="30"></el-radio-button>
                <el-radio-button label="365"></el-radio-button>
            </el-radio-group>
            <span class="mg-left-10">天</span>
            <el-select
              class="mg-left-20"
              v-model="ip"
              placeholder="请选择IP"
              clearable
              @change="getData">
              <el-option
                v-for="item in ipList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button class="pull-right" @click="getData">刷新</el-button>
        </div>
        <el-table
            stripe
            border
            size="mini"
            :data="pvList"
            style="width: 100%"
        >
            <el-table-column prop="url" label="URL"></el-table-column>
            <el-table-column prop="count" label="PV"></el-table-column>
        </el-table>
        <el-table
            class="mg-top-20"
            stripe
            border
            size="mini"
            :data="ipCountList.slice(0,10)"
            style="width: 100%"
        >
            <el-table-column prop="url" label="URL"></el-table-column>
            <el-table-column prop="ip" label="IP"></el-table-column>
            <el-table-column prop="city" label="归属地"></el-table-column>
            <el-table-column prop="count" label="访问次数"></el-table-column>
        </el-table>
        <IPMap v-if="provinceCountList.length" :data="provinceCountList"></IPMap>
        <PVChart></PVChart>
    </div>
</template>

<script>
// import IPMap from './components/IPMap.vue'
export default {
    components: {
        IPMap: () => import(/* webpackChunkName: "ipmap" */ './components/IPMap.vue'),
        PVChart: () => import(/* webpackChunkName: "pvchart" */ './components/PVChart.vue'),
    },
    data() {
        return {
            days: 30,
            ip: '',
            pvList: [],
            ipList: [],
            ipCountList: [],
        };
    },
    computed: {
        provinceCountList () {
            let provinceCountMap = this.ipCountList.reduce((acc, item) => {
                if (!item.province) {
                    return acc
                }
                if (!acc[item.province]) {
                    acc[item.province] = item.count
                    return acc
                }
                acc[item.province] += item.count
                return acc
            }, {})
            return Object.entries(provinceCountMap).map(itemArr => ({
                name: itemArr[0].replace(/[省]/g, ''),
                value: itemArr[1],
            }))
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData () {
            this.getIpList()
            this.getList();
            this.getIpVisitList()
        },
        getList() {
            this.axios
              .get("/stat/getPvLimit", {
                  params: { days: this.days,ip: this.ip, limit: 10 },
              })
              .then((res) => {
                  this.pvList = res.data;
              })
        },
        getIpVisitList() {
            this.axios
              .get("/stat/getIpVisitList", {
                  params: { days: this.days, limit: 100 },
              })
              .then((res) => {
                  this.ipCountList = res.data;
              })
        },
        getIpList () {
          this.axios
              .get("/stat/getIpList", {
                  params: { days: this.days},
              })
              .then((res) => {
                  this.ipList = res.data.filter(item => item.ip).map(item => ({
                    label: item.ip,
                    value: item.ip,
                  }));
              })
        },
    },
};
</script>

<style>
</style>